<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box">
			<ushop-search @click="gotoSearch"></ushop-search>
		</view>
		
		
	    <!-- 轮播图区域 -->
	    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
	      <!-- circular 开启循环 -->
		  <!-- 循环渲染轮播图的 item 项 -->
	      <swiper-item v-for="(item, i) in swiperList" :key="i">
	        <navigator class="swiper-item" :url="`/subPkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
	          <!-- 动态绑定图片的 src 属性 -->
	          <image :src="item.image_src"></image>
	        </navigator>
	      </swiper-item>
	    </swiper>
		
		<!-- 菜单导航 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(obj,index) in navList" :key="index" @click="navClick(obj)">
				<image :src="obj.image_src" mode=""></image>
			</view>
		</view>
		
		<!-- 楼层区域 -->
		<view class="floor-list">
			<!-- 楼层每一项 -->
			<view class="floor-item" v-for="(item,i) in floorList" :key="i" >
				
				<view class="floor-title" >
					<!-- 楼层标题 -->
					<image :src="item.floor_title.image_src"></image>
				</view>
				
				<view class="floor-img">
					<!-- 楼层左图片 -->
					<navigator class="floor-img-left" :url="item.product_list[0].url">
						<image :style="{width: item.product_list[0].image_width + 'rpx'}"  :src="item.product_list[0].image_src" mode="widthFix"></image>
					</navigator>
					
					<!-- 楼层右图片 -->
					<view class="floor-img-right">
						<navigator class="floor-img-right-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
							<image :style="{width: item2.image_width + 'rpx'}" :src="item2.image_src" mode="widthFix"></image>
						</navigator>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		 data() {
		    return {
		      // 1. 轮播图的数据列表，默认为空数组
		      swiperList: [],
			  // 4 .导航数据
			  navList:[],
			  // 8. 楼层数据
			  floorList:[]
		    }
		  },
		  onLoad() {
		    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
		    this.getSwiperList()
			// 5 . 导航数据
			this.getNavList()
			// 9 . 楼层数据
			this.getFloorList()
		  },
		  methods: {
		    // 3. 获取轮播图数据的方法
		    async getSwiperList() {
		      // 3.1 发起请求
		      const { data: res } = await uni.$http.get('/home/swiperdata')
		      // 3.2 请求失败
		      if (res.meta.status !== 200) return uni.$showMsg()
		      // 3.3 请求成功，为 data 中的数据赋值
		      this.swiperList = res.message
		    },
			// 6. 获取导航数据
			async getNavList(){
				const {data:res} = await uni.$http.get('/home/catitems')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.navList = res.message
			},
			//7 .点击分类导航跳转分类页面
			//事件处理函数
			navClick(obj){
				//判断点击的是哪个nav
				if(obj.name ==='分类'){
					uni.switchTab({
						url:'../cate/cate'
					})
				}
			},
			//10. 获取楼层数据
			async getFloorList(){
				const {data:res} = await uni.$http.get('/home/floordata')
				if(res.meta.status !== 200) return uni.$showMsg()
				
				//修改数据格式
					
				res.message.forEach(floor=>{
						
					floor.product_list.forEach(prod=>{
						//修改其地址 为了配合分包的暂时方案 
						//将原数据 的query取出来
						prod.url = '/subPkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
					})
				})
				
				this.floorList = res.message
			},
			//触发自定义组件的事件处理函数
			gotoSearch(e){
				// console.log(e)
				uni.navigateTo({
					url:'/subPkg/search/search'
				})
			}
		  },
	}
		
	
</script>

<style lang="scss">
	.search-box{
		//吸顶效果 页面超出时不会把搜索顶掉
		position: sticky;
		top:0;
		left:0;
		z-index:99;
	}
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }
	  
  .nav-list{
	  
	  display: flex;
	  justify-content: space-around;
	  padding: 32rpx;
		  
	  .nav-item,
	  image{
		  width: 128rpx;
		  height: 140rpx;
	  }
  }
	  
  .floor-list{
	  .floor-title image{
		height: 60rpx;
		width: 100%;
	  }
	  .floor-img{
		display: flex;
		padding-left: 8rpx;
		  .floor-img-left{
		  }
			  
		  .floor-img-right{
			  display: flex;
			  justify-content: space-around;
			  flex-wrap: wrap;
		  }
	  }
  }
</style>
